<template>
  <!-- <div class="main"> -->
    <a-modal v-model:visible="visible" :width="900" @cancel="cancel">
      <template #title>
        <h3>报废信息查询</h3>
      </template>
      <template #footer>
        <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOkClick" class="btn">确定</a-button>
      </template>
      <!-- <a-modal
      v-model:visible="visible"
      width="100%"
      wrap-class-name="full-modal"
      > -->
      <a-row class="top-title">
          <a-col :span="3">
              <h4>机构名称：</h4>
          </a-col>
          <a-col :span="6">
              <a-tree-select
              v-model:value="value"
              show-search
              style="width: 210px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              allow-clear
              tree-default-expand-all
              :tree-data="treeOrgData"
            >
              <template #title="{ value: val, title }">
                <!-- <b v-if="val === 'parent 1-1'" >sss</b> -->
                <!-- <template>{{ title }}</template> -->
                <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
                <template v-else>{{ title }}</template>
              </template>
            </a-tree-select>
          </a-col>
          <a-col :span="9">
            <a-button key="search" @click="handleSearchClick(value)" class="btn">查询</a-button>
          </a-col>
      </a-row>
      <a-table :columns="columns" :data-source="data" v-model:visible="visible">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'farm'">
            <span>
              车间
            </span>
          </template>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="primary" @click="handleDataClick(record)" id="hisBtn">试验历史数据</a-button>
            <HistoryModal ref="modalRef" :selectRecord2="selectRecord2" :historyData="historyData"></HistoryModal>
          </template>
        </template>
      </a-table>
      <!-- <template #footer>
          <a-button key="close" type="primary" @click="handleOk" class="btn">关闭</a-button>
      </template> -->
  </a-modal>
  <!-- </div> -->
</template>

<script setup>
  import { ref, watchEffect,onMounted } from 'vue';
  import HistoryModal from './HistoryDataModal.vue';
  import request from '@/utils/request'

  const visible = ref(false);
  const modalRef = ref(null)

  const value = ref('')
  const treeOrgData = ref([]);

  const selectRecord2 = ref()
  const historyData = ref([])

  const props=defineProps(['powerTreeData'])

  watchEffect(()=>{
    treeOrgData.value=props.powerTreeData
  })

  const columns = [{
    title: '车间',
    dataIndex: 'workshop',
    key: 'workshop',
    align:'center'
  }, {
    title: '班组',
    dataIndex: 'team',
    key: 'team',
    align:'center'
  }, {
    title: '绝缘工具',
    dataIndex: 'name',
    key: 'name',
    align:'center'
  }, {
    title: '编号',
    key: 'number',
    dataIndex: 'number',
    align:'center'
  }, {
    title: '是否补充',
    key: 'supply ',
    dataIndex: 'supply ',
    align:'center'
  },{
    title: '规格型号',
    key: 'specification',
    dataIndex: 'specification',
    align:'center'
  },{
    title: '保管人',
    key: 'keeper',
    dataIndex: 'keeper',
    align:'center'
  },{
    title: '操作',
    key: 'action',
    align:'center'
  }];
  const data =ref([])
  const teamValue=ref([])

  // const searchValue=ref([])
  onMounted(async()=>{
    // const res=await request({
    //     url:'/scrap/selectall',
    //     method:'get'
    // })
    // data.value=res.data.data

    
  const res = await request.get(`/sys/getSubOrg`)
  teamValue.value=res.data.data
  })

  //取消按钮
const handleCancelClick = () => {
  visible.value = false;
  value.value=''
  data.value=[]
}
//确定按钮
const handleOkClick = () => {
  visible.value = false;
  value.value=''
  data.value=[]
} 

//×按钮
const cancel=()=>{
  value.value=''
  data.value=[]
}

//查询按钮
const handleSearchClick = async(value) => {
  // 根据id获取名称
  

  const orgName=ref('')
  for(var i=0;i < teamValue.value.length;i++){
      if(value===teamValue.value[i].orgId){
        orgName.value=teamValue.value[i].orgName
      }
  }

  const result=await request({
    url:'/scrap/list',
    method:'get',
    params:{
      orgName:orgName.value
    }
  })
  data.value=result.data.data
  console.log(result.data.data)
}
  const handleDataClick = async(record) => {
    console.log(record)
    selectRecord2.value = record
    // const id = record.id.slice(0,1)
    const result = await request({
    url:'/scrap/historylist',
    method:'get',
    params:{
    toolid:record.id
    }
  })
  // console.log(result.data.data);
  historyData.value = result.data.data
  modalRef.value.showModal(record)
  }

  const showModal = () => {
      visible.value = true;
  };
  
  defineExpose({
      showModal,
  })
</script>

<style lang="less" scoped>
// .full-modal {
//   .ant-modal {
//       max-width: 100%;
//       top: 0;
//       padding-bottom: 0;
//       margin: 0;
//   }
//   .ant-modal-content {
//       display: flex;
//       flex-direction: column;
//       height: calc(100vh);
//   }
//   .ant-modal-body {
//       flex: 1;
//   }
  h3{
      display: inline-block;
      font-weight: 900;
  }
  .table{
      padding-top: 40px;
  }
  .btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 80px;
      padding: 0;
  }
  .top-title{
      margin-top: 10px;
      padding-bottom: 20px;
      align-items: center;
  }
  #hisBtn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 120px;
      padding: 0;
  }
// }
</style>